<template>
    <div id="gdCenter">
        <div class="heightChart">
            <div class="title">工单来源</div>
            <div class="navTop">
                <img class="navImg" src="../../../assets/img/worksource/yuan.png" alt="">
                <div>反应地区</div>
            </div>
            <div id="quyu"></div>
            <div class="navBtm">
                <img class="navImg" src="../../../assets/img/worksource/yuan.png" alt="">
                <div>反应片区</div>
            </div>
            <div id="bumen"></div>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts'
    import {getRebackAdressCount, getRebackArea} from "../../../network/home";

    export default {
        name: "gdCenter",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.setEchart2();
            this.timer = setInterval(() => {
                this.setEchart()
                this.setEchart2()
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('中间关闭')
            }
        },
        methods: {
            setEchart() {
                getRebackAdressCount().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)

                        let myChart = echarts.init(document.getElementById("quyu"));
                        myChart.setOption({
                            color: '#03B9CC',
                            radar: [
                                {
                                    // indicator: [
                                    //     {text: '市区', max: 100, color: '#fff'},
                                    //     {text: '乡镇区', max: 100, color: '#fff'},
                                    //     {text: '城北区', max: 100, color: '#fff'},
                                    //     {text: '玉山开发区', max: 100, color: '#fff'},
                                    //     {text: '城南区', max: 100, color: '#fff'},
                                    //     {text: '城中区', max: 100, color: '#fff'}
                                    // ],
                                    indicator: res.data.name,
                                    center: ['50%', '50%'],
                                    radius: 130,
                                    splitArea: {
                                        areaStyle: {
                                            color: 'none',
                                        },
                                    }
                                },
                            ],
                            series: [
                                {
                                    type: 'radar',
                                    areaStyle: {
                                        color: '#077390',
                                    },
                                    data: [
                                        {
                                            value: res.data.dataList,
                                            name: '区域统计'
                                        }
                                    ],
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: false, //开启显示
                                                position: 'top', //在上方显示
                                                textStyle: { //数值样式
                                                    color: 'white',
                                                    fontSize: 15
                                                },
                                            }
                                        }
                                    },
                                }
                            ]
                        });
                    }
                });
            },


            setEchart2() {
                getRebackArea().then(res => {
                    if (res.code == '200') {
                        console.log(res.data)
                        var res = {
                            "colValues": {
                                // "0": ["10", "20", "30", "40", "50", "1137", "1072", "1054", "826"]
                                "0": res.data.dataList
                            },
                            "title": "数据",
                            // "labels": ["开发区自来水", "周市供水", "市监督局", "人民法院", "市国税局", "市农业委员会", "社会保障局", "市教育局", "市财政局"]
                            "labels": res.data.name
                        }
                        var _data = [{
                            symbolSize: 2,
                            label: {
                                show: true
                            },
                            value: [0, 0],
                        }];

                        var _nameArr = [];
                        var _valuelArr = [];
                        var _linesDatas = []
                        _nameArr = res.labels;
                        _valuelArr = res.colValues[0];
                        for (var i = 0; i < _nameArr.length; i++) {
                            _data.push({
                                name: _nameArr[i],
                                s: _valuelArr[i],
                                value: [1, _nameArr.length - i]
                            });
                            _linesDatas.push(
                                [{
                                    coord: [0, 0], // 起点
                                },
                                    {
                                        coord: [0.96, _nameArr.length - i + 0.03], // 起点
                                    },
                                ]
                            )

                        }

                        let myChart = echarts.init(document.getElementById("bumen"));
                        myChart.setOption({
                            polar: {},
                            radiusAxis: {
                                show: false
                            },
                            angleAxis: {
                                type: 'value',
                                show: false,
                                clockwise: false
                            },
                            series: [{
                                type: 'graph',
                                hoverAnimation: false,
                                coordinateSystem: 'polar',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        fontSize: 11,
                                        color: '#fff'
                                    }
                                },
                                symbol: 'image://',
                                symbolSize: 15,
                                nodes: _data,
                                silent: false,
                                zlevel: 2
                            },
                                {
                                    type: 'lines',
                                    coordinateSystem: 'polar',
                                    lineStyle: {
                                        color: '#25cfb6',
                                        width: 1,
                                        opacity: 0.9,
                                        curveness: .3
                                    },
                                    effect: {
                                        show: true,
                                        symbol: 'roundRect',
                                        symbolSize: [3, 8],
                                        color: 'rgba(130,245,95,.64)',
                                        trailLength: .3,
                                        label: {
                                            show: false
                                        },
                                    },
                                    data: _linesDatas,
                                    markLine: {},
                                    label: {
                                        show: false
                                    },
                                    symbol: ['none', 'arrow'],
                                    symbolSize: 10,
                                    zlevel: 1
                                }
                            ]
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 650px;
        height: 800px;
        background: url("../../../assets/img/worksource/a2.png");
        background-size: 650px 800px;
        position: relative;
        font-size: 20px;
        color: var(--color-high-text);
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color:#FEF17A;
    }

    .navTop {
        display: flex;
        align-items: center;
        position: absolute;
        top: 5%;
        left: 10%;
    }

    .navTop div{
        color: #E5AA0F;
    }

    .navBtm {
        display: flex;
        align-items: center;
        position: absolute;
        top: 52%;
        left: 10%;
    }
    .navBtm div{
        color: #DE5D43;
    }
    .navImg {
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }

    #quyu {
        width: 500px;
        height: 340px;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #bumen {
        width: 500px;
        height: 340px;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
